<template>
  <div class="users_box">丁普成
    <el-card>
      <el-row class="header">
        <el-col :span="6">
          <el-input class="INPUT" v-model="queryInfo.username" placeholder="根据用户名搜索"></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px;">
          <el-button size="small" @click="emptyTableList">清空</el-button>
          <el-button type="primary" size="small" @click="SearchTableList">搜索</el-button>
        </el-col>
        <el-col :span="10">
          <el-button type="success" icon="el-icon-edit" @click="showAddForm" class="filter-item fr" size="small">新增用户
          </el-button>
        </el-col>
      </el-row>
      <el-alert :title="'共'+total+'条记录'" show-icon :closable="false" type="info" style="margin:20px 0px">
      </el-alert>
      <el-table :data="tableList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="250" align="center"></el-table-column>
        <el-table-column prop="permission_group_title" label="权限组名称" align="center"></el-table-column>
        <el-table-column prop="role" label="角色" width="250" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button type="primary" plain icon="el-icon-edit" circle @click="showEditUsers(row)"></el-button>
            <el-button type="danger" v-if="row.id !==2" plain icon="el-icon-delete" circle @click="remove(row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <PageTool :total="total" :paginationPage="queryInfo.page" :paginationPagesize="queryInfo.pageSize"></PageTool> -->
      <el-pagination class="fenye" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pagesize"
        layout=" prev, pager, next,sizes, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 新增用户的弹出框 -->
    <el-dialog title="提示" :visible.sync="addDialog" width="50%" @close="close">
      <el-form label-width="250px" :model="addForm" :rules="addFormRules" ref="addFormRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="addForm.role" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="addForm.permission_group_id">
            <el-option :label="item.title" :value="item.id" v-for="item in PermissionGroupsList" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="addForm.phone" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input type="textarea" v-model="addForm.introduction" class="INPUT"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addUsers">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑用户的弹出框 -->
    <el-dialog title="编辑用户" :visible.sync="editDialog" width="50%">
      <el-form label-width="250px" :model="editForm" :rules="addFormRules" ref="editFormRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="editForm.role" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="editForm.permission_group_id">
            <el-option :label="item.title" :value="item.id" v-for="item in PermissionGroupsList" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="editForm.phone" class="INPUT"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input type="textarea" v-model="editForm.introduction" class="INPUT"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editUsers">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, simple, remove, update } from '../../api/base/users.js'
// import PageTool from '../components/page-tool.vue'
export default {
  // components: {
  //   PageTool
  // },
  data () {
    return {
      PermissionGroupsList: [], // 权限组加载
      // 添加用户的表单
      addForm: {
        avatar: '',
        email: '',
        username: '',
        phone: '',
        password: '',
        permission_group_id: '',
        role: '',
        introduction: ''
      },
      // 添加用户的表单的验证规则
      addFormRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      // 添加用户的弹出框是否显示
      addDialog: false,
      // 编辑用户的表单
      editForm: {
        id: '',
        avatar: '',
        email: '',
        username: '',
        phone: '',
        password: '',
        permission_group_id: '',
        role: '',
        introduction: ''
      },
      total: 0,
      editDialog: false, // 编辑用户的弹出框是否显示
      tableList: [], // 用户数据
      queryInfo: { // 用户数据请求参数
        page: 1,
        pagesize: 10,
        username: ''
      }
    }
  },

  created () {
    this.getTableList()
  },
  watch: {
    total () {
      if (this.total === (this.queryInfo.page - 1) * this.queryInfo.pagesize && this.total !== 0) { // 这一行是关键代码，倍数关系
        this.queryInfo.page -= 1
        this.getTableList()// 获取表格数据的方法
      }
    }
  },
  methods: {
    close () {
      this.$refs.addFormRef.resetFields()
    },
    // 清空操作
    emptyTableList () {
      this.queryInfo.username = ''
      this.getTableList()
    },
    // 搜索
    SearchTableList () {
      console.log(this.queryInfo.username)
      this.getTableList()
    },
    // 删除用户
    remove (row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功!')
        this.getTableList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑用户
    editUsers () {
      this.$refs.editFormRef.validate(async bool => {
        if (!bool) return console.log('校验失败')
        const res = await update(this.editForm)
        console.log(res)
        if (res.status !== 200) return this.$message.error('编辑失败')
        this.$message.success('编辑成功')
        this.getTableList()
        this.editDialog = false
      })
    },
    // 点击显示添加用户框
    showAddForm () {
      this.addDialog = true
      this.setupData()
    },
    // 新增用户
    addUsers () {
      this.$refs.addFormRef.validate(async bool => {
        if (!bool) return console.log('校验失败')
        const res = await add(this.addForm)
        console.log(res)
        if (res.status !== 200) return this.$message.error('新增失败')
        this.$message.success('新增成功')
        this.getTableList()
        this.addDialog = false
      })
    },
    // 获取权限列表
    setupData () {
      simple().then(data => {
        this.PermissionGroupsList = data.data
        console.log(this.PermissionGroupsList)
      })
    },
    // 删除用户
    deleteUsers () { },
    // 显示编辑用户
    showEditUsers (row) {
      this.editDialog = true
      this.editForm.id = row.id
      this.editForm.avatar = row.avatara
      this.editForm.email = row.email
      this.editForm.username = row.username
      this.editForm.phone = row.phone
      this.editForm.password = row.password
      this.editForm.permission_group_id = row.permission_group_id
      this.editForm.role = row.role
      this.editForm.introduction = row.introduction
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log('当前' + val + '页')
      this.queryInfo.page = val
      this.getTableList()
    },
    // 每页多少条
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getTableList()
    },
    // 获取用户数据
    async getTableList () {
      const { data: res } = await list(this.queryInfo)
      console.log(res)
      this.tableList = res.list
      this.total = res.counts
    }
  }
}
</script>

<style scoped lang='less'>
.users_box {
  margin: 20px 20px;
}
/deep/ .INPUT {
  width: 300px;
}
.fenye {
  float: right;
  margin: 20px 0px;
}
</style>
